<template>
  <div>
    <div class="until_title">今日监控</div>
    <div class="relative camera-water">
      <div class="camera-water-left">
        <p class="camera-water-number">{{devTotal - dev}}</p>
        <p>离线摄像头</p>
      </div>
      <div class="camera-com" ref="camera"></div>
      <div class="camera-water-right">
        <p class="camera-water-number">{{dev}}</p>
        <p>在线摄像头</p>
      </div>
    </div>
    <div class="camera-data clear">
      <div class="left clear" style="margin-right: 150px;">
        <i class="iconfont icon-jinggao left"></i>
        <div class="left">
          <p class="camera-number">
            <span class="relative">{{selCount.catchCounts}}<i v-if="selCount.catchCounts > selCount.yesterdayCatchCounts" class="iconfont icon-jianyoushang camera-arrow"></i></span>
          </p>
          <p>违规抓拍</p>
        </div>
      </div>
      <div class="left clear">
        <i class="iconfont icon-jingbao left"></i>
        <div class="left">
          <p class="camera-number">
            <span class="relative">{{selCount.alarmCounts}}<i v-if="selCount.alarmCounts > selCount.yesterdayCatchCounts" class="iconfont icon-jianyoushang camera-arrow"></i></span>
          </p>
          <p>安全报警</p>
        </div>
      </div>
    </div>
    <div class="camera-detail" @click="push">查看实时视频监控</div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'monitor',
    data () {
      return {
        selCount: {},
        dev: 0,
        devTotal: 0,
        cameraOption: {
          series: [{
            type: 'liquidFill',
            data: [0.6, 0.5],
            radius: '95%',
            // 水球颜色
            color: ['#136595', '#1fadff'],
            center: ['50%', '50%'],
            outline: {
              borderDistance: 2,
              itemStyle: {
                borderWidth: 2,
                borderColor: '#1fadff'
              }
            },
            label: {
              normal: {
                color: '#fff',
                insideColor: '#fff',
                fontSize: 24
              }
            },
            // 内图 背景色 边
            backgroundStyle: {
              color: 'rgba(4,24,74,0)'
            }
          }]
        }
      }
    },
    mounted () {
      this.monitorVideoCatch()
      this.getProjectOnlineRate()
    },
    computed: {
      ...mapGetters({
        incomingAIVideoNode: 'incomingAIVideoNode'
      })
    },
    watch: {
      incomingAIVideoNode (item) {
        if (item.type === 2 || item.type === 3) {
          this.selCount.alarmCounts++
        } else {
          this.selCount.catchCounts++
        }
      },
      '$route' (to, from) {
        if (to.name === 'AIvideo') {
          this.monitorVideoCatch()
          this.getProjectOnlineRate()
        }
      }
    },
    methods: {
      monitorVideoCatch () {
        const data = {
          'projectId': this.$route.query.pjId
        }
        this.$axios({
          method: 'post',
          closeLoading: true,
          url: `${this.$site.videoServer}/api/monitorVideoCatch/selCountBy`,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.selCount = res.data.data
        })
      },
      initCamera (dev, devTotal) {
        this.cameraOption.series[0].data = [dev / devTotal, dev / devTotal]
        this.cameraEchart = this.$echarts.init(this.$refs.camera)
        this.cameraEchart.setOption(this.cameraOption)
      },
      getProjectOnlineRate () {
        if (!this.$route.query.pjId) return
        let data = {
          projectId: this.$route.query.pjId
        }
        this.$axios({
          method: 'post',
          closeMessage: true,
          closeLoading: true,
          url: `${this.$site.videoServer}/api/hikvision8700/getProjectOnlineRate`,
          data: this.$qs.stringify(data)
        }).then(res => {
          let {dev, devTotal} = res.data.data
          this.dev = dev
          this.devTotal = devTotal
          this.initCamera(dev, devTotal)
        })
      },
      push () {
        this.$router.push({name: 'videoProject', query: {pjId: this.$route.query.pjId, name: this.$route.query.name}})
      }
    }
  }
</script>

<style scoped lang='scss'>
  .camera-water{
    width: 360px;
    height: 120px;
    margin: 10px auto 0 auto;
    .camera-water-left{
      position: absolute;
      top: 0;
      left: 5px;
      background-image: url("/static/images/bgy-ai-line.png");
      background-repeat: no-repeat;
      background-position: 0 32px;
      width: 125px;
      height: 50px;
    }
    .camera-water-right{
      position: absolute;
      bottom: -5px;
      right: 15px;
      background-image: url("/static/images/bgy-ai-line2.png");
      background-repeat: no-repeat;
      background-position: 0 18px;
      width: 125px;
      height: 50px;
      text-align: right;
    }
    .camera-water-number{
      font-size: 24px;
      font-weight: bolder;
      color: #fff;
      margin-bottom: 10px;
    }
    .camera-com{
      width: 120px;
      height: 120px;
      margin: 0 auto;
    }
  }
  .camera-data{
    margin: 60px 0 60px 28px;
    .camera-number{
      font-size: 28px;
      font-weight: bolder;
      color: #fff;
      margin-bottom: 10px;
      position: relative;
      .camera-arrow{
        position: absolute;
        right: -20px;
        top: 3px;
        color: #e64747;
      }
    }
    .icon-jinggao{
      font-size: 40px;
      margin: 5px 15px 0 0;
      color: #ffc600;
    }
    .icon-jingbao {
      font-size: 40px;
      margin: 5px 15px 0 0;
      color: #e64747;
    }
  }
  .camera-detail{
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 5px;
    width: 100%;
    height: 70px;
    line-height: 70px;
    text-align: center;
    box-shadow: 0 0 6px 1px rgba(9, 94, 114, 0.85) inset;
    background: rgba(10, 47, 68, 0.8);
    color: #36d6e6;
    letter-spacing: 2px;
    font-size: 24px;
  }
</style>
